<template>
  <div class="success-page">
    <header class="success-header">
      <img src="../assets/image/app-icon-1024.png" alt="logo" />
    </header>

    <div class="download-options">
      <!-- iOS 下载按钮 -->
      <a href="https://apps.apple.com/us/app/my-app/id6743833544" class="download-button" target="_blank"
        rel="noopener noreferrer">
        <img src="../assets/image/appstores/app-store-badge.svg" alt="Download on App Store" />
      </a>

      <!-- Android 下载按钮 -->
      <a href="https://play.google.com/store/apps/details?id=com.auditoryworks.near_hub_go_app" class="download-button"
        target="_blank" rel="noopener noreferrer">
        <img src="../assets/image/appstores/google-play-badge.png" alt="Get it on Google Play" />
      </a>

      <!-- APK 直接下载按钮 -->
      <a href="#" class="download-button" @click.prevent="downloadApk">
        <img src="../assets/image/appstores/download-apk-badge.png" alt="Download APK" />
      </a>
    </div>
  </div>
</template>

<script>

export default {
  // name: 'DownloadPage',
  methods: {
    downloadApk() {
      // 这里替换为实际的 APK 下载链接
      const apkUrl = 'https://aw-public-abroad.oss-us-west-1.aliyuncs.com/near_hub_go/apk/app-release.apk';
      window.location.href = apkUrl;
    }
  }
};
</script>

<style scoped>
.success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

.success-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-header img {
  /* 移除原来的flex显示方式 */
  width: 120px;
  height: 120px;
}

.success-title {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin: 20px 0 10px;
}

.success-subtitle {
  font-size: 18px;
  color: #666;
  margin: 0;
}

.download-options {
  display: flex;
  flex-direction: column;
  gap: 0px;
  /* 增加按钮之间的间距 */
  width: 100%;
  max-width: 300px;
  margin-top: 20px;
  /* 添加顶部间距 */
}

.download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.download-button:hover {
  transform: scale(1.02);
}

.download-button img {
  height: 48px;
  /* 统一设置高度 */
  width: auto;
  object-fit: cover;
  /* 确保图片保持比例 */
  width: 135px;
  height: 40px;
}

@media (max-width: 480px) {
  .success-title {
    font-size: 28px;
  }

  .success-subtitle {
    font-size: 16px;
  }

  .download-button img {
    height: 40px;
    /* 移动端稍微调小一点 */
  }
}

/* 移除这些不需要的样式 */
.download-button.apk {
  background-color: #8A69D4;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

.apk-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.download-button.apk img {
  max-height: 40px;
  width: auto;
}

@media (max-width: 480px) {
  .success-title {
    font-size: 28px;
  }

  .success-subtitle {
    font-size: 16px;
  }

  .download-button img {
    max-height: 36px;
  }
}

/* 移除之前的 apk-icon 相关样式 */
</style>